<!--
 * @Author       : Li Ming Yang
 * @Date         : 2023-11-21 16:36:45
 * @Description  : 面板导航组件
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2023-12-19 17:24:58
-->
<template>
  <view class="deco-panel-navigation" :style="[innerStyle]">
    <view class="panel-list" :style="[listStyle]" :class="[data.data.type]">
      <panel-navigation-item v-for="(item, index) in data.data.list" :key="index" :data="item" :form="data.data"></panel-navigation-item>
    </view>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
import { useStyle, useDecoUnit } from "@/decoration/utils/style"
import PanelNavigationItem from "./components/panel-navigation-item/panel-navigation-item"
export default {
  name: "deco-panel-navigation",
  components: { PanelNavigationItem },
  mixins: [mixin],
  data() {
    return {}
  },
  computed: {
    type() {
      return (data) => {
        const goodsKey = ["branddiscount", "purchase", "customizepage"]
        return goodsKey.includes(data.jumpType) && data.goods?.length > 0 ? "goods" : "panel"
      }
    },
    listStyle() {
      const style = {}
      style["grid-column-gap"] = this.data.data?.gap ? useDecoUnit(this.data.data.gap) : "0"
      style["grid-row-gap"] = this.data.data?.gap ? useDecoUnit(this.data.data.gap) : "0"
      return useStyle(style)
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      await this.$nextTick()
      if (this.$check.isEmpty(this.data?.data?.list)) {
        this.decoWrap?.hide()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-panel-navigation {
  width: 100%;
  overflow: hidden;

  .empty-icon {
    width: 100%;
    height: 100%;
    color: #ccc;
    font-size: 100px;
  }

  .panel-list {
    color: #bbb;
    display: grid;
    box-sizing: border-box;
  }

  // 一行两列
  .one-row-one-col {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 1fr;
  }

  // 一行两列
  .one-row-two-col {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
  }

  // 一行三列
  .one-row-three-col {
    grid-template-columns: repeat(3, 1fr);
  }

  // 一行四列
  .one-row-four-col {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
  }

  // 一上两下
  .one-top-two-bottom {
    grid-template-columns: repeat(2, 1fr);

    ::v-deep .panel-navigation-item:nth-child(1) {
      grid-area: 1 / 1 / 2 / 3;
    }

    ::v-deep .panel-navigation-item:nth-child(2) {
      grid-area: 2 / 1 / 3 / 2;
    }

    ::v-deep .panel-navigation-item:nth-child(3) {
      grid-area: 2 / 2 / 3 / 3;
    }
  }

  // 一左两右
  .one-left-two-right {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);

    ::v-deep .panel-navigation-item:nth-child(1) {
      gap: 0;
      grid-area: 1 / 1 / 3 / 2;
    }

    ::v-deep .panel-navigation-item:nth-child(2) {
      grid-area: 1 / 2 / 2 / 3;
    }

    ::v-deep .panel-navigation-item:nth-child(3) {
      grid-area: 2 / 2 / 3 / 3;
    }
  }

  // 一左三右
  .one-left-three-right {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);

    ::v-deep .panel-navigation-item:nth-child(1) {
      grid-area: 1 / 1 / 5 / 3;
    }

    ::v-deep .panel-navigation-item:nth-child(2) {
      grid-area: 1 / 3 / 3 / 5;
    }

    ::v-deep .panel-navigation-item:nth-child(3) {
      grid-area: 3 / 3 / 5 / 4;
    }

    ::v-deep .panel-navigation-item:nth-child(4) {
      grid-area: 3 / 4 / 5 / 5;
    }
  }

  // 两行两列
  .two-row-two-col {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}
</style>
